import styles from './index.less';
import { useParams, useIntl, Link } from 'umi';
import { useEffect, useState } from 'react';
import { Button, Select, Popover, Input } from 'antd';
const { TextArea } = Input;
import { LeftOutlined, DownOutlined } from '@ant-design/icons';
import request from '@/utils/request';
import { handleAvatarError } from '@/utils';
import { leadStagefn, leadSourcefn, priorityfn } from '@/data/options';

interface ParamsType {
  chatId: string;
}

function profilePage() {
  const intl = useIntl();
  const params: ParamsType = useParams();

  const leadStage = leadStagefn();
  const leadSource = leadSourcefn();
  const priority = priorityfn();

  const [profileInfo, setProfileInfo] = useState({});

  useEffect(() => {
    getProfileInfo();
  }, []);

  const [actionMenuVisible, setActionMenuVisible] = useState(false);

  const getProfileInfo = () => {
    request.get(`/contact/${params.chatId}`).then((res) => {
      setProfileInfo(res.data.contact);
    });
  };

  const actionMenu = () => {
    return (
      <div>
        <div>{intl.formatMessage({ id: 'edit' })}</div>
        <div>{intl.formatMessage({ id: 'addToRoster' })}</div>
        <div>{intl.formatMessage({ id: 'remove' })}</div>
      </div>
    );
  };
  const changeActionMenuVisible = (visible: boolean) => {
    setActionMenuVisible(visible);
  };

  return (
    <div className={styles.profile}>
      <div className={styles.slider}>
        <div className={styles.topSection}>
          <div className={styles.header}>
            <Link to={'/contacts'}>
              <div className={styles.goback}>
                <LeftOutlined />
                {intl.formatMessage({ id: 'goBackContact' })}
              </div>
            </Link>
            <Popover
              content={actionMenu()}
              trigger="click"
              placement="bottomLeft"
              visible={actionMenuVisible}
              onVisibleChange={changeActionMenuVisible}
            >
              <span className={styles.action}>
                {intl.formatMessage({ id: 'action' })}
              </span>
              <DownOutlined />
            </Popover>
          </div>
          <div className={styles.profileInfo}>
            <div className={styles.profileAvatar}>
              <img
                src={''}
                className={styles.avatar}
                alt=""
                onError={handleAvatarError}
              />
            </div>
            <div className={styles.profileName}>{profileInfo.name}</div>
          </div>
          <Button type="primary" block>
            {intl.formatMessage({ id: 'send' })}
          </Button>
        </div>
        <div className={`${styles.contentSection} noscrollbar`}>
          <div className={styles.profileDetail}>
            <div className={styles.pdTitle}>
              {intl.formatMessage({ id: 'ContactInformation' })}
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'name' })}
              </div>
              <div className={styles.pdItemValue}>{profileInfo.name}</div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'lastname' })}
              </div>
              <div className={styles.pdItemValue}>{profileInfo.lastname}</div>
            </div>
            {/* <div className={styles.pdItem}>
            <div className={styles.pdItemName}>{intl.formatMessage({ id: 'label' })}</div>
            <div className={styles.pdItemValue}>Name</div>
          </div> */}
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'email' })}
              </div>
              <div className={styles.pdItemValue}>{profileInfo.email}</div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'phonenumber' })}
              </div>
              <div className={styles.pdItemValue}>{profileInfo.phone}</div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'companyname' })}
              </div>
              <div className={styles.pdItemValue}>
                {profileInfo.companyName}
              </div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'jobtitle' })}
              </div>
              <div className={styles.pdItemValue}>{profileInfo.jobTitle}</div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'contactowner' })}
              </div>
              <div className={styles.pdItemValue}>
                {profileInfo.assignedName}
              </div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'leadstage' })}
              </div>
              <div className={styles.pdItemValue}>
                {
                  leadStage.find((n) => n.value === profileInfo.leadStage)
                    ?.label
                }
              </div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'leadsource' })}
              </div>
              <div className={styles.pdItemValue}>
                {
                  leadSource.find((n) => n.value === profileInfo.leadSource)
                    ?.label
                }
              </div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'priority' })}
              </div>
              <div className={styles.pdItemValue}>
                {priority.find((n) => n.value === profileInfo.priority)?.label}
              </div>
            </div>
            {/* <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'country' })}
              </div>
              <div className={styles.pdItemValue}>{profileInfo.country}</div>
            </div> */}
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'subscriber' })}
              </div>
              <div className={styles.pdItemValue}>
                {profileInfo.subscriber ? '是' : '否'}
              </div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'lastcontactfromyou' })}
              </div>
              <div className={styles.pdItemValue}>
                {profileInfo.lastContactFromYou}
              </div>
            </div>
            <div className={styles.pdItem}>
              <div className={styles.pdItemName}>
                {intl.formatMessage({ id: 'lastcontactfromcustomers' })}
              </div>
              <div className={styles.pdItemValue}>
                {profileInfo.lastContactFromCustomers}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.content}>
        <div className={styles.header}>
          {intl.formatMessage({ id: 'Activities' })}
        </div>
        <div className={styles.chatlist}>
          {['', '', '', '', '', '', '', '', '', ''].map((item, i) => (
            <div key={i} className={styles.clitem}>
              <div className={styles.clitemtop}>
                <div className={styles.avatar}>
                  <img
                    src=""
                    alt=""
                    className={styles.img}
                    onError={handleAvatarError}
                  />
                </div>
                <div className={styles.name}>name</div>
                <div className={styles.time}>2020-15-50 50:20</div>
              </div>
              <div className={styles.clitemdes}>sdfsdafasdf</div>
            </div>
          ))}
        </div>
        <div className={styles.sendMsg}>
          <div className={styles.tab}>
            {intl.formatMessage({ id: 'Activities' })}
          </div>
          <TextArea
            className={styles.msgTextarea}
            bordered={false}
            autoSize={{ minRows: 2, maxRows: 6 }}
          />
          <Button className={styles.journal} type="primary">
            {intl.formatMessage({ id: 'send' })}
          </Button>
        </div>
      </div>
      {/* <div className={styles.widgets}>标签</div> */}
    </div>
  );
}
export default profilePage;
